<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="field"
      width="800px"
      @close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="100px"
        class="form-business"
      >
        <el-form-item label="登录账号" prop="loginName">
          <el-input v-model="ruleForm.loginName" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="账号名称" prop="userName">
          <el-input v-model="ruleForm.userName" clearable />
        </el-form-item>
        <el-form-item label="初始密码" v-if="field != '修改企业'">
          <el-input v-model="ruleForm.password" clearable />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="ruleForm.phonenumber" clearable />
        </el-form-item>
        <el-form-item label="企业名称" prop="deptName">
          <el-input v-model="ruleForm.deptName" clearable />
        </el-form-item>
        <el-form-item label="企业联系人" prop="deptName">
          <el-input v-model="ruleForm.leader" clearable />
        </el-form-item>
        <el-form-item label="企业地址">
          <el-input
            v-model="ruleForm.deptAdress"
            clearable
            :disabled="true"
            style="width: 400px"
          />
          <el-button
            class="btn-search"
            icon="el-icon-location-outline"
            size="small"
            @click="handleClick"
          >
            选择
          </el-button>
        </el-form-item>
        <el-form-item label="企业简介">
          <el-input v-model="ruleForm.introduction" />
        </el-form-item>
        <el-form-item label="到期时间" prop="expirationDate">
          <el-date-picker
            v-model="ruleForm.expirationDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="addressDialog"
      title="地图选址"
      width="1000px"
      custom-class="mapDialog"
      @close="closeMapDialog"
    >
      <div>
        <GaodeMap
          @updateLocation="updateLocation"
          :addressDialog="addressDialog"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeMapDialog">取 消</el-button>
        <el-button type="primary" @click="parentConfirmFunction"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import GaodeMap from "@/components/GaodeMap";
import { deptAdd, deptEdit } from "@/api/businessmanagement";
export default {
  name: "DialogForm",
  components: {
    GaodeMap,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: () => "",
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      ruleForm: {
        loginName: "",
        userName: "",
        password: "123456",
        phonenumber: "",
        deptName: "",
        leader: "",
        deptAdress: "",
        introduction: "",
        location: "",
        province: "",
        city: "",
        district: "",
        township: "",
        expirationDate: "",
      },
      addressDialog: false,
      selectedLocation: {
        deptAdress: "",
        location: "",
        province: "",
        city: "",
        district: "",
        township: "",
      },
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.initData();
      }
    },
  },
  methods: {
    initData() {
      this.$nextTick(() => {
        // 清除之前的校验状态
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate();
        }
        
        if (this.field === "添加企业") {
          this.ruleForm = {
            loginName: "",
            userName: "",
            password: "123456",
            phonenumber: "",
            deptName: "",
            leader: "",
            deptAdress: "",
            introduction: "",
            location: "",
            province: "",
            city: "",
            district: "",
            township: "",
            expirationDate: "",
          };
        } else {
          this.ruleForm = { ...this.rowData };
        }
      });
    },
    handleClose() {
      this.$emit("input", false);
    },
    handleClick() {
      this.addressDialog = true;
    },
    handleConfirm() {
      // 发送表单数据到父组件
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            loginName: this.ruleForm.loginName,
            userName: this.ruleForm.userName,
            phonenumber: this.ruleForm.phonenumber,
            deptName: this.ruleForm.deptName,
            leader: this.ruleForm.leader,
            deptAdress: this.ruleForm.deptAdress,
            location: this.ruleForm.location,
            province: this.ruleForm.province,
            city: this.ruleForm.city,
            district: this.ruleForm.district,
            township: this.ruleForm.township,
            expirationDate: this.ruleForm.expirationDate,
            introduction: this.ruleForm.introduction,
          };
          if (this.field === "添加企业") {
            data.parentId = "100";
            data.password = this.ruleForm.password;
            deptAdd(data).then((res) => {
              console.log(res, "res");
              if (res.code === 0) {
                this.$message.success("添加成功");
                this.$emit("init");
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            data.parentId = this.ruleForm.parentId;
            data.deptId = this.ruleForm.deptId;
            data.userId = this.ruleForm.userId;
            deptEdit(data).then((res) => {
              if (res.code === 0) {
                this.$message.success("修改成功");
                this.$emit("init");
              } else {
                this.$message.error(res.msg);
              }
            });
          }
          this.dialogVisible = false;
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    },
    parentConfirmFunction() {
      console.log(this.selectedLocation, "this.selectedLocation");
      this.ruleForm.deptAdress = this.selectedLocation.deptAdress;
      this.ruleForm.location = this.selectedLocation.location;
      this.ruleForm.province = this.selectedLocation.province;
      this.ruleForm.city = this.selectedLocation.city;
      this.ruleForm.district = this.selectedLocation.district;
      this.ruleForm.township = this.selectedLocation.township;
      this.addressDialog = false;
    },
    closeMapDialog() {
      this.addressDialog = false;
      this.selectedLocation = {
        deptAdress: "",
        location: "",
        province: "",
        city: "",
        district: "",
        township: "",
      };
    },
    updateLocation(data) {
      this.selectedLocation = {
        deptAdress: data.address,
        location: data.longitudeLatitude,
        province: data.province,
        city: data.city,
        district: data.district,
        township: data.township,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.form-business {
  width: 600px;
  margin: 0 auto;
}
</style>

<style lang="scss">
.mapDialog {
  margin-top: 5vh !important;
  .el-dialog__body {
    height: 800px;
    overflow: auto;
    padding-bottom: 15vh;
  }
}
</style>
